<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>注册</title>
	<link rel="stylesheet" href="/wjfh/css/iconfont.css">
	<link rel="stylesheet" type="text/css" href="/wjfh/css/common.css"/>
	<link rel="stylesheet" type="text/css" href="/wjfh/layui/css/layui.css"/>
	<link rel="stylesheet" type="text/css" href="/wjfh/css/style.css"/>
	<script src="/wjfh/js/flexible.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<form class="layui-form" method="post" id="regbox">
	<div class="resgcontain">
		<h1 class="site-h1">欢迎注册 — 五季芳禾</h1>
		<div class="layui-form-item">
			<label class="layui-form-label" style="min-width: 15%">微信号:</label>
			<div class="layui-input-block">
				<input type="text" name="wechat" style="width: 95%;margin-left: 5%" lay-verify="required" autocomplete="off" placeholder="请输入微信号" v-model="wxchat" class="layui-input">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label" style="min-width: 15%">手机号:</label>
			<div class="layui-input-block">
				<input type="text" name="mobile" id="mobile" style="width: 95%;margin-left: 5%" class="layui-input" value="" required lay-verify="required|phone" autocomplete="off" placeholder="请输入手机号" v-model="mobile" />
				<input type="hidden" name="username" id="username">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label" style="min-width: 15%">密码:</label>
			<div class="layui-input-block">
				<input type="password" name='password' style="width: 95%;margin-left: 5%" class="layui-input" value="" required lay-verify="required" autocomplete="off" placeholder="请输入密码" v-model="pass" />
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label" style="min-width: 15%">邀请码:</label>
			<div class="layui-input-block">
				<input type="text" name="invite" class="layui-input" style="width: 95%;margin-left: 5%" value="" required lay-verify="required" autocomplete="off" placeholder="请输入邀请码" v-model="code" />
				<p class="nimpp fs12"><span class="icon iconfont">&#xe60f;</span>请联系您的上级获取邀请码</p>
			</div>

		</div>


	</div>
	<div class="cotpad">
		<fieldset class="layui-elem-field layui-field-title site-title">
			<legend><a name="compatibility">地址</a></legend>
		</fieldset>
	</div>
	<div class="resgcontain">
		<div class="layui-form-item">
			<input type="text" name='name'  class="layui-input" value="" required lay-verify="required" autocomplete="off" placeholder="请输入姓名" v-model="name" />
		</div>
		<div class="item mb">
			<div class="layui-form-item layui-row mb">
				<div class="layui-col-xs12">
					<div class="posire">
						<select id="province" name="province" lay-filter="province" lay-verify="required">
							<option value="">请选择省</option>
						</select>
					</div>
				</div>
				<div class="layui-col-xs12">
					<div class="posire" style="display: none;">
						<select id="city" name="city" lay-filter="city" lay-verify="required">
							<option value="">请选择市</option>
						</select>
					</div>
				</div>
				<div class="layui-col-xs12">
					<div class="posire" style="display: none;">
						<select id="area" name="district" lay-filter="area" lay-verify="required">
							<option value="">请选择县/区</option>
						</select>
					</div>
				</div>
				<!-- <input type="button" class="layui-btn" value="提交"
                    onclick="getSelectValue()"> -->
			</div>

		</div>
		<div class="item">
			<textarea class="publicIptSty widthman" name="liveAddress" lay-verify="required" placeholder="详细到门牌,例如和平大道54号2410室"  v-model="address"></textarea>
		</div>
	</div>
	<div class="cotpad">
		<p class="nimpp"><input type="checkbox" name="" title="同意注册" lay-skin="primary" checked><a class="xieyihref" href="">《注册协议》</a></p>
	</div>
	<div class="cotpad">
		<button class="layui-btn layui-btn-fluid resgSubmit"  lay-submit lay-filter="resgSubmit">注册</button>
	</div>
</form>
<div class="Noresg">已有账号？<a href="/goodsManager/page/login">立即登录</a></div>
<script src="/wjfh/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="/wjfh/js/area.js" type="text/javascript" charset="utf-8"></script>
<script src="/wjfh/js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/wjfh/js/axios.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" >

</script>
<script type="text/javascript">
    var vm = new Vue({
        el:'#regbox',
        data:{
            wxchat:'',name:'',mobile:'',pass:'',code:'',sheng:'',shi:'',qu:'',address:''
        },
        methods:{
            regFun:function(){

            }
        },
        mounted:function(){
            //初始数据
            var areaData = Area;
            var $form;
            var form;
            var $;
            layui.use(['jquery', 'form','layer'], function() {
                $ = layui.jquery,
                    form = layui.form,
                    layer = layui.layer,
                    $form = $('form');
                var pageurl = window.location.href;
                console.log(pageurl);
                if (pageurl.indexOf("?") != -1){
                    if(pageurl.split('?')[1].split('&')[1] != -1){
                        vm.code = pageurl.split('?')[1].split('&')[0].split('=')[1];
					}

                }
                //监听提交
                form.on('submit(resgSubmit)', function(data){
                    layer.ready(function(){
                        layer.load(1);
                    });
                    $("#username").val($("#mobile").val());
                    console.log($('#regbox').serialize());
					$.ajax({
						cache: true,
						type: "POST",
						url: "/goodsManager/page/register",
						data: $('#regbox').serialize(),// 你的formid
						error : function(request) {
							layer.alert("Connection error");
						},
						success : function(data) {

                            layer.closeAll('loading');
						    if(data.code == 500){
                                layer.msg(data.msg, {icon: 5,time: 1200});
							}else{
                                layer.msg(data.msg, {icon: 6,time: 1200},function () {
                                    parent.location.href = '/goodsManager/page/login';
                                });
							}
							console.log(data);

						}
					});
//                    axios.post('/sys/user/register', {
//                        params:{
//                            wechat:vm.wxchat,
//                            name:vm.name,
//                            username:vm.mobile,
//                            mobile:vm.mobile,
//                            password:vm.pass,
//                            invite:vm.code,
//                            province:vm.sheng,
//                            city:vm.shi,
//                            district:vm.qu,
//                            liveAddress:vm.address,
//                        },
//                        dataType: 'json', //服务器返回json格式数据
//                        type: 'post', //HTTP请求类型
//                    })
//                        .then(function(response) {
//                            console.log(vm.sheng);
//                            console.log(response);
//                            if(response.data.code == 200){
//                                layer.msg('注册成功！', {time: 1200});
//							}else{
//                                layer.msg(response.data.msg, {time: 1200});
//							}
//                            //layer.msg('验证码发送成功！', {time: 1200});
//
//                        })
//                        .catch(function (error) {
//                            //layer.msg(error)
//                        });
                    return false;
                });
                //自定义验证规则
                form.verify({
                    validateMoney: function (value) {
                        var result = validateMoney(value);
                        if (result != "Y") {
                            return result;
                        }
                    }
                });
                loadProvince();

            });
            function getSelectValue() {   //获取省市县/区在area.js配置的地区编码
                var province = document.getElementById("province").value;
                var city = document.getElementById("city").value;
                var area = document.getElementById("area").value;
                alert(province.split('_', 1));
                alert(city.split('_', 1));
                alert(area);
            }
            //加载省数据   '_' + areaData[i].mallCityList.length + '_' + i +
            function loadProvince() {
                var proHtml = '';
                for (var i = 0; i < areaData.length; i++) {
                    proHtml += '<option value="' + areaData[i].provinceName + '_' + areaData[i].mallCityList.length + '_' + i +'">' + areaData[i].provinceName + '</option>';
                }
                //初始化省数据
                $form.find('select[name=province]').append(proHtml);
                form.render();
                form.on('select(province)', function(data) {
                    $form.find('select[name=area]').html('<option value="">请选择县/区</option>').parent().hide();
                    var value = data.value;
                    vm.sheng = value;
                    var d = value.split('_');
                    var code = d[0];
                    var count = d[1];
                    var index = d[2];
                    if (count > 0) {
                        loadCity(areaData[index].mallCityList);
                    } else {
                        $form.find('select[name=city]').parent().hide();
                    }
                });
            }
            //加载市数据   '_' + citys[i].mallAreaList.length + '_' + i +
            function loadCity(citys) {
                var cityHtml = '';
                for (var i = 0; i < citys.length; i++) {
                    cityHtml += '<option value="' + citys[i].cityName + '_' + citys[i].mallAreaList.length + '_' + i +'">' + citys[i].cityName + '</option>';
                }
                $form.find('select[name=city]').append(cityHtml).parent().show();
                form.render();
                form.on('select(city)', function(data) {
                    var value = data.value;
                    vm.shi = value;
                    var d = value.split('_');
                    var code = d[0];
                    var count = d[1];
                    var index = d[2];
                    if (count > 0) {
                        loadArea(citys[index].mallAreaList);
                    } else {
                        $form.find('select[name=area]').parent().hide();

                    }
                });
            }
            //加载县/区数据
            function loadArea(areas) {
                var areaHtml = '';
                for (var i = 0; i < areas.length; i++) {
                    areaHtml += '<option value="' + areas[i].areaName + '">' + areas[i].areaName + '</option>';
                }
                $form.find('select[name=district]').append(areaHtml).parent().show();
                form.render();
                form.on('select(area)', function(data) {
                    vm.qu = data.value;
                });
            }
        }
    })
</script>
</body>
</html>
